<template>
	<view>
		<view class="time-line" v-for="(item,index) in data " :key="index">

			<view class="time-arr">




				<view class="time-line-item" v-for="(iitem,iindex) in item.time " :key="iindex">

					<view class="">
						<checkbox-group @change='change($event,index)' v-if="iindex===0" >
							<label>
								<checkbox :checked="item.check"  />
							</label>
						</checkbox-group>
					</view>


					<view class="">
						{{iindex===0?item.name:''}}
					</view>
					<view class="iconfont icon-jichuxinxi-shuaxin  ml20 fontsize32 color-blue"
						@tap="restTime(index,iindex)" v-if="hasRest &&iindex!==0"></view>
					<picker class="picker-input  ml20" mode="time" :value="iitem.start" start="00:00" end="23:59"
						@change="bindTimeChange(index,iindex,'start',$event)">
						<view class="uni-input">{{iitem.start}}</view>
					</picker>
					<view class="iconfont">-</view>
					<picker class="picker-input" mode="time" :value="iitem.end" start="00:00" end="23:59"
						@change="bindTimeChange(index,iindex,'end',$event)">
						<view class="uni-input">{{iitem.end}}</view>
					</picker>
					<u-icon name='plus-circle' size="26px" @tap="addTime(index)" v-if='hasAdd && iindex===0'></u-icon>
					<u-icon name='minus-circle' size="26px" @tap="removeTime(index,iindex,item)"
						v-if='hasAdd && iindex!==0'></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "weekTime",
		// 局部注册的组件
		components: {},
		props: {
			data: {
				type: Array,
				default: [{
					name: '第一组',
					time: [{
						start: '00:00',
						end: '00:00'
					}, {
						start: '00:00',
						end: '00:00'
					}]
				}, ]
			},
			hasRest: {
				type: Boolean,
				default: false,
			},
			hasAdd: {
				type: Boolean,
				default: false,
			},
		},
		// 组件状态值
		data() {
			return {}
		},
		// 计算属性
		computed: {},
		onLoad() {},
		onShow() {},
		onHide() {},
		onUnload() {},
		// 组件方法
		methods: {
			change($event,index){
				this.data[index].check=this.data[index].check?false:true
				console.log($event,index,this.data[index])
				this.$emit('bindTimeChange', this.data, 1)
					
			},
			restTime(index, iindex) {
				this.data[`${index}`].time[`${iindex}`] = {
					start: '00:00',
					end: '23:59'
				};
				this.$emit('bindTimeChange', this.data)
			},
			addTime(index) {
				let arrLength = this.data[`${index}`].time.length;
				if (arrLength >= 3) {
					wx.showToast({
						title: "最多支持三组时间数据",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				this.data[`${index}`].time.push({
					start: '00:00',
					end: '23:59'
				});
				this.$emit('bindTimeChange', this.data, 1)
			},
			removeTime(index, iindex) {
				this.data[`${index}`].time.splice(iindex, 1);
				this.$emit('bindTimeChange', this.data, 1)
			},
			bindTimeChange(index, iindex, type, e) {
				let preTime = '00:00',
					lastTime = '00:00',
					arr = [];
				this.data[`${index}`].time[`${iindex}`][`${type}`] = e.target.value;
				this.data[`${index}`].time.map(item => {
					arr.push(item.start, item.end)
				});
				console.log('arr', arr)
				// start: pre index*2-1 cur index*2   last index*2+1
				// end:   pre index*2   cur index*2+1 last index*2+2
				preTime = type === 'start' ? '无' : type === 'start' ? arr[`${iindex * 2 - 1}`] : arr[
					`${iindex * 2}`];
				lastTime = (type === 'end' && iindex * 2 + 1 === arr.length - 1) ? '无' : type === 'start' ? arr[
					`${iindex * 2 + 1}`] : arr[`${iindex * 2 + 2}`];
				this.$emit('bindTimeChange', this.data, 1);
				// this.verifierTimeLine(preTime, e.target.value, '无'); // 填值时只需比较当前和之前的大小
			},
			verifierTimeLine(preTime, curTime, lastTime) { //单条时间段校验
				// console.log('单条时间段校验', preTime, curTime, lastTime)
				let curArr = curTime.split(":");
				let preArr = preTime === '无' ? [-1, -1] : preTime.split(":"); //最前面的没有比较数据处理
				let lastArr = lastTime === '无' ? [curArr[0] + 1, curArr[1] + 1] : lastTime.split(":"); //最后的没有比较数据处理
				// console.log('单条时间段校验', curArr, preArr, lastArr)
				let pre = Number(preArr[0] * 3600) + Number(preArr[1] * 60); //+ Number(preArr[2]);
				let cur = Number(curArr[0] * 3600) + Number(curArr[1] * 60); //+ Number(curArr[2]);
				let last = Number(lastArr[0] * 3600) + Number(lastArr[1] * 60); //+ Number(curArr[2]);
				if (!(pre < cur && cur < last)) {
					uni.showToast({
						title: "起始时间必须大于结束时间",
						icon: "none",
						duration: 2000,
					});
					return false;
				} else {
					return true;
				}

			},
		},
	}
</script>

<style lang='scss' scoped>
	/deep/.u-icon {
		margin: 0 20rpx;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.mr20 {
		margin-right: 20rpx;
	}

	.time-line {
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		min-height: 68rpx;
		line-height: 44rpx;
	}

	.time-arr {
		display: flex;
		flex-direction: column;

	}

	.time-line-item {
		display: flex;
		justify-content: flex-end;
		/* align-items: flex-start; */
		align-items: center;
		margin: 10rpx 0;
	}

	.picker-input {
		width: 200rpx;
		border-radius: 48rpx;
		border: 2rpx solid #999999;
		height: 50rpx;
		line-height: 48rpx;
		text-align: center;
	}

	.fontsize32 {
		font-size: 32rpx;
	}

	.color-blue {
		color: #0078fe;
	}
</style>